<template>
  <Card>
    <template v-slot:title>
      {{ title }}
    </template>
    <div class="well">
      <div>
        <table class="table">
          <thead>
          <tr>
            <th>
              组织id
            </th>
            <th>
              组织名字
            </th>
            <th>
              所属父类
            </th>
            <th>
              操作
            </th>
          </tr>
          </thead>
          <tbody id="pageMain">
          <tr v-for="(item, index) in list" :key="item.id" class="item">
            <td style="width:200px;">
              {{item.id}}
            </td>
            <td>
              <template v-if="editingIndex !== index">
                {{ item.orgName }}
              </template>
              <template v-else>
                <el-input v-model="item.orgName"></el-input>
              </template>
            </td>
            <td>
              <template v-if="editingIndex !== index">
                {{ item.fatherOrg }}
              </template>
              <template v-else>
                <el-input v-model="item.fatherOrg"></el-input>
              </template>
            </td>

            <td>
              <template v-if="editingIndex !== index">
                <el-button @click="startEditing(index)">编辑</el-button>
              </template>
              <template v-else>
                <el-button @click="saveChanges(index)">保存</el-button>
              </template>
              <el-button @click="deleteBtn(index)">删除</el-button>
              &ensp;
            </td>
          </tr>

          </tbody>
        </table>
        <div id="pageBox">

        </div>
      </div>
    </div>
  </Card>
</template>

<script>


import {Card} from "view-ui-plus";

export default {
  name: "AssetOrgList",
  components: {Card},

  data() {
    return {
        newOrgName:'',
        newFatherOrg:'',
        editingIndex: -1,
    }
  },
  created() {
  },
  props: {
    title: String,
    list: Array,
  },
  methods:{
    startEditing(index) {
      this.editingIndex = index;
    },
    deleteBtn(index) {
      this.$api.delete('assetOrg/delete/' + this.list[index].id)((res) => {
        this.$Notice.info({
          title: '提示',
          desc: res.msg
        });
      })
    },
    saveChanges(index) {
      const data = this.list[index];
      console.log(data)
      this.$api.post('assetOrg/update', data).then((res) => {
        console.log(res.data)
        this.$Notice.info({
          title: '提示',
          desc: res.msg
        });
      })
      this.editingIndex = -1;
    },
  }
}
</script>

<style scoped>
.item td {
  border-bottom: 1px solid #eee;
  padding: 10px;
  width: 200px;
}
.well{
  display: flex;
  justify-content: center;
}
.well table {
  min-width: 1024px;
}
#pageBox {
  display: flex;
  justify-content:space-between;
}
</style>